/* ----------------------------------------*\
  GLOBAL
\* ---------------------------------------- */

html {
  @apply h-full;
  height: -webkit-fill-available;
  @apply overflow-y-scroll;
  @apply font-regular;
}

#root,
#__nuxt,
#__layout,
#vue-app,
#app {
  @apply h-full;
  @apply flex;
  @apply flex-col;
  > div {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

body {
  @apply h-full;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  @apply transition-transform duration-700;
}

.body--mobile-menu-is-open {
  @apply overflow-hidden;
  height: calc(100vh + 3rem);
  transform: translateY(-3em);
}

.body--mobile-menu-is-open-top-bar-disabled {
  @apply overflow-hidden;
  height: calc(100vh + 3rem);
}

#main-header {
  @apply relative z-30;
}

#main-content {
  @apply flex-grow;
  @apply relative z-10;
}

#main-footer {
  @apply relative z-0;
}

.skip-to-content {
  @apply inline-block px-4 py-2;
  @apply absolute z-50 top-0 left-1/2;
  @apply bg-secondary-900 text-white border-white border-2;
  @apply shadow-md transition-transform;
  transform: translateX(-50%) translateY(-200%);

  &:focus {
    transform: translateX(-50%) translateY(0);
  }
}

*:focus-visible {
  @apply outline-none ring-2 ring-purple-500 z-10;

  .top-bar &,
  .bg--secondary-900 &,
  .bg--secondary-800 &,
  .bg--secondary-700 &,
  .bg--secondary-600 &,
  .bg--secondary-500 & {
    @apply ring-purple-300;
  }
}

[id] {
  @apply scroll-mt-8;
}
